<template>
  <div>
    <van-nav-bar
        title="用户注册页面"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="kuang1">

      <van-form @submit="onSubmit">
        <div class="yang1">
          <van-field
              v-model="username"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
          />
        </div>
        <div class="yang2">
          <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </div>
        <div class="yang3">
          <van-field
              v-model="password1"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </div>
        <div class="yang4">
          <van-field
              v-model="code"
              name="验证码"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
          />
        </div>
        <!--      <el-button type="primary" size="small" @click="onGetCode">获取验证码</el-button>-->
        <div class="yang5">
          <el-button
              v-if="!isCounting"
              type="primary"
              size="small"
              @click="onGetCode"
          >
            获取验证码
          </el-button>
          <el-button
              v-else
              type="primary"
              size="small"
              :disabled="true"
          >
            {{ countdown }}秒后重新获取
            <div class="kuang2"></div>
          </el-button>
        </div>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCounting: false, // 是否正在倒计时
      countdown: 60, // 倒计时秒数
      username: '',
      password: '',
      password1: '',
      code: '',
      from: {},
      all: [],
      a: false,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    countdownTimer() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          // 倒计时结束，恢复可点击状态
          this.isCounting = false;
          this.countdown = 60;
          clearInterval(timer);
        }
      }, 1000);
    },
    onGetCode() {
      const phoneRegex = /^1[3-9]\d{9}$/;
      console.log(this.username)
      // 测试手机号是否匹配正则表达式
      if (!phoneRegex.test(this.username)) {
        this.$message.error('手机号格式不正确');

      } else {

        this.all.forEach(item => {
          if (item.username == this.username) {
            this.a = true;
          }
        })
        if (this.a == false) {
          this.axios.get(`http://1.94.221.254:9999/api/qcfw-user/user/sendCode?phone=${this.username}`).then(res => {
            this.$message.success('验证码已发送，请注意查收');
          })

          // 点击后开始倒计时
          this.isCounting = true;
          this.countdownTimer();
        } else {
          this.$message.error('手机号已存在');
          this.a = false;
        }
      }
    },
    onSubmit(values) {
      this.from.username = this.username;
      this.from.password = this.password;
      this.from.code = this.code;
      console.log(this.from);

      if (this.password != this.password1) {
        this.$message.error('密码不一致');
        return;
      }
      this.axios.post(`http://1.94.221.254:9999/api/qcfw-user/user/register`, this.from).then(res => {
        if (res.data.code == 200) {
          this.$message.success('注册成功')
          this.$router.push('/')
        } else {
          this.$message.error("注册失败")
        }
      })
    },
    findAll() {
      this.axios.get(`http://1.94.221.254:9999/api/qcfw-user/user/findAll`).then(res => {
        this.all = res.data.data
        console.log(res.data.data)
      })
    }
  },
  created() {
    this.findAll()
  }
}
</script>

<style scoped>
.fanhui {
  padding-left: 15px;
  font-size: 20px;
}

.kuang1 {
  position: absolute;
  top: 30%;
  left: 40%;
  transform: translate(-50%, -50%);
}

.yang1 {
  margin-bottom: 10px;
}

.yang2 {
  margin-bottom: 10px;
}

.yang3 {
  margin-bottom: 10px;
}

.yang4 {
  margin-bottom: 10px;
}

.yang5 {
  text-align: right;
  margin-top: -43px;
  padding-left: 95%;
}

</style>